<template>
  <div>
    <button class="Add" @click="Add">新增</button>
    <RanderTable :total="total" :header="header" :tableData="tableData">
      <template #del="{index,item}">
        <button @click="deleteFun(index)">删除</button>
        <button @click="xgClick(item,index)">修改</button>
      </template>
    </RanderTable>
    <h2>
      目前表格长度是
      <span style="color:red;font-size:30px;">{{tableDataLen | AddZero}}</span>条
    </h2>
    <Form :xgMsg="xgMsg" v-if="isShowForm" @newData="newData" />
  </div>
</template>

<script>
import RanderTable from "./RanderTable";
import Form from "./Form";
import { AddZero } from "../../filter/index";
import {localFun} from '../../localstorage/index'
export default {
  data() {
    return {
      isShowForm: false,
      xgMsg: [],
      xgIndex: [],
      header: [
        { title: "check" },
        { title: "index" },
        { title: "name", ming: "姓名" },
        { title: "gender", ming: "性别" },
        { title: "hobbies", ming: "爱好" },
        { title: "city", ming: "城市" },
        { title: "button" }
      ],
      tableData: [
        // {
        //   name: "nijni",
        //   gender: "男",
        //   hobbies: ["打篮球", "踢足球"],
        //   city: "1"
        // }
      ],
      total: 1
    };
  },
  mounted() {
    this.tableData=localFun.fetch()
    // this.localGetFun();
     this.tableData.filter(function(v) {
      if(v.hobbies instanceof Array){
        v.hobbies = v.hobbies.join("、");
      }
      switch (v.city) {
        case "1":
          return (v.city = "北京");
        case "2":
          return (v.city = "天津");
        case "3":
          return (v.city = "上海");
        case "4":
          return (v.city = "云南");
        case "5":
          return (v.city = "山西");
        case "6":
          return (v.city = "山东");
      }
    });
  },
  watch:{
    tableData(newValue){
      localFun.save(newValue)
    }
  },
  methods: {
    newData([newObj, closeform, isXg, xgIndex]) {
      this.isShowForm = closeform;
      if (isXg) {
        this.tableData[xgIndex] = newObj;
      } else {
        this.tableData.push(newObj);
      }
        // this.localSetFun();
      if (newObj.city == "1") {
        newObj.city = "北京";
      } else if (newObj.city == 2) {
        newObj.city = "天津";
      } else if (newObj.city == 3) {
        newObj.city = "上海";
      } else if (newObj.city == 4) {
        newObj.city = "云南";
      } else if (newObj.city == 5) {
        newObj.city = "山西";
      } else if (newObj.city == 6) {
        newObj.city = "山东";
      }
      newObj.hobbies = newObj.hobbies.join("、");
    },
    Add() {
      this.xgMsg = [];
      this.isShowFun();
    },
    deleteFun(index) {
      if(confirm('是否确定删除？？？')){
        this.tableData.splice(index, 1);
      // this.localSetFun()
      }else{
        return
      }
    },
    xgClick(data, index) {
      this.xgMsg.push(data);
      this.xgIndex.push([index]);
      this.isShowForm = true;
    },
    isShowFun() {
      this.isShowForm = !this.isShowForm;
    },
    // localSetFun() {
    //   localStorage.setItem("tableData", JSON.stringify(this.tableData));
    // },
    // localGetFun() {
    //   if (localStorage.getItem("tableData")) {
    //     this.tableData = JSON.parse(localStorage.getItem("tableData"));
    //   } else {
    //     this.tableData = [];
    //   }
    // }
  },
  filters: {
    AddZero
  },
  computed: {
    tableDataLen() {
      return this.tableData.length;
    }
  },
  components: {
    RanderTable,
    Form
  }
};
</script>

<style scoped>
.Add {
  background-color: green;
  border: none;
  width: 50px;
  height: 30px;
  color: #ffffff;
}
</style>